<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>确认挂号</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/cw.css"/>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.4.min.js"></script>
		<script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/public.js" ></script>
		<script type="text/javascript" src="../js/app/yuyue-hospital.js" ></script>
	</head>
       <style type="text/css">
       	  .mui-slider{height: 150px;}
       	  .mui-slider-indicator{text-align: right;width:96%;bottom: 6%;}
       	  .mui-slider-indicator .mui-indicator{margin: 1px 2px;}
       	  .nubme{font-size: 15px;}
       	  .mui-media-body{font-size:13px !important;}
       	  .icon-hollow3{color: #8dc21f;}
       	  .icon-hollow4{color: #ff5252;}
       	 .mui-slider-indicator .mui-active.mui-indicator{background: #8dc21f;}
       	 .mui-slider-indicator .mui-indicator{background: white;box-shadow: none;}
         .mui-grid-view.mui-grid-9 .mui-media .mui-icon{font-size:1.2em}
         .mui-grid-view.mui-grid-9 .mui-table-view-cell{padding:0;background: white;}
         .text-jianli{font-size:15px;padding:10px;background: white;margin-top: 5px;margin-bottom: 10px;}
         .text-jianli p{color: #333333;text-indent: 2em;}
         .mui-bar-footer{background:#8dc21f;text-align: center;line-height: 44px;}
         /*电话弹窗*/
        .phone-zzao{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index: 20;background:rgba(0,0,0,.5)}
        .phone-tc{display:none;position:fixed;z-index: 30;width:70%;left: 15%;top:30%;border-radius:5px;padding:10px 0 15px 10px;background: white;}
        .phone-tc p{color: #333333;}
        .toumi{position:fixed;bottom:0;left: 0;right: 0;z-index: 111;width:100%;height: 50px;display: none; }
        
       </style>
	<body>
		<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title ">确认挂号</h1>
	</header> 
	<nav class="mui-bar mui-bar-footer">查看医生</nav><!-- onclick="openNewpage('yuyue-look.html')"-->
		<div class="mui-content" id="content">
		    <div id="slider" class="mui-slider" >
		      <div class="mui-slider-group mui-slider-loop">
		        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
		        <div class="mui-slider-item mui-slider-item-duplicate">
		          <a href="#">
		            <img src="../images/yuyue2.png">
		          </a>
		        </div>
		        <!-- 第一张 -->
		        <div class="mui-slider-item">
		          <a href="#">
		            <img src="../images/yuyue2.png">
		          </a>
		        </div>
		        <!-- 第二张 -->
		        <div class="mui-slider-item">
		          <a href="#">
		            <img src="../images/yuyue2.png">
		          </a>
		        </div>
		        <!-- 第三张 -->
		        <div class="mui-slider-item">
		          <a href="#">
		            <img src="../images/yuyue2.png">
		          </a>
		        </div>
		        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
		        <div class="mui-slider-item mui-slider-item-duplicate">
		          <a href="#">
		            <img src="../images/yuyue2.png">
		          </a>
		        </div>
		      </div>
		      <div class="mui-slider-indicator">
		        <div class="mui-indicator mui-active"></div>
		        <div class="mui-indicator"></div>
		        <div class="mui-indicator"></div>
		      </div>
		    </div>
		    <ul class="mui-table-view mui-grid-view mui-grid-9">
			    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			        <a href="#">
			            <span class="nubme weishu">0位</span>
			            <div class="mui-media-body">已预约</div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			        <a href="#">
			            <span class="nubme grade">未设置</span>
			            <div class="mui-media-body">等级</div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 daohang">
			        <a href="#">
			            <span class="mui-icon iconfont icon-hollow4"></span><!-- onclick="openNewpage('yuyue-daoh.html')"-->
			            <div class="mui-media-body">导航</div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			        <a class="tel">
			            <span class="mui-icon iconfont icon-hollow3"></span>
			            <div class="mui-media-body">电话</div>
			        </a>
			    </li>
		    </ul>
		    <div class="text-jianli">
		    	<span>医院简历：</span>
		    </div>
		    <!--电话弹窗-->
		    <div class="phone-zzao"></div>
		    <div class="phone-tc">
		    	<p class="mui-text-center" style="font-size:17px">电话</p>
		    </div>
		    <div class="toumi"></div>
		</div>
		
		<script type="text/javascript">
			mui.init();
            mui("#slider").slider({
				interval: 1500
			});
		//电话弹窗
		$('.tel').on('tap',function(){
		  	$('.phone-zzao').show();
		  	$('.phone-tc').show();
		  	$('.toumi').show()
		  	$("#content").css({
		  	 "height": window.innerHeight,
		  	 "overflow": "hidden"
		  	});
		});
		$('.phone-zzao').on('tap',function(){
		  	$(this).hide();
		  	$('.phone-tc').hide();
		  	$('.toumi').hide()
			$("#content").css({
		  	 "height": "auto",
		  	 "overflow": "auto"
		  	});
		})
		</script>
	</body>
</html>